<template>
    <div>
        <div class="container" @mouseenter="stopAutoScroll" @mouseleave="resumeAutoScroll">
            <div class="header">
                <span style="flex: 3;">学院</span>
                <span style="flex: 2;">毕业生总数</span>
                <span style="flex: 2;">困难生总数</span>
                <span style="flex: 2;">困难生落实</span>
            </div>
            <div class="table-wrapper" ref="tableWrapper">
                <div v-for="(data, index) in loopTableData" class="table" :key="index">
                    <span style="flex: 3">{{ data.major }}</span>
                    <span style="flex: 2">{{ data.name }}</span>
                    <span style="flex: 2">{{ data.address }}</span>
                    <span style="flex: 2">{{ data.number }}</span>
                </div>
            </div>
            <div class="table total-table">
                <span style="flex: 3">总计</span>
                <span style="flex: 2">{{ totalGraduates }}</span>
                <span style="flex: 2">{{ totalDifficultStudents + 5 }}</span>
                <span style="flex: 2">{{ totalDifficultStudentsSettled + 3 }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { major: "材料科学与工程学院", name: 584, address: 29, number: 10 },
                { major: "电气工程学院", name: 621, address: 24, number: 11 },
                { major: "国际工学院", name: 285, address: 1, number: 1 },
                { major: "机械与精密仪器工程学院", name: 906, address: 44, number: 26 },
                { major: "计算机科学与工程学院", name: 547, address: 26, number: 5 },
                { major: "经济与管理学院", name: 920, address: 28, number: 9 },
                { major: "理学院", name: 326, address: 22, number: 9 },
                { major: "马克思主义学院", name: 93, address: 0, number: 0 },
                { major: "人文与外国语学院", name: 204, address: 10, number: 2 },
                { major: "水利水电学院", name: 795, address: 24, number: 13 },
                { major: "土木建筑工程学院", name: 520, address: 29, number: 16 },
                { major: "艺术与设计学院", name: 377, address: 18, number: 6 },
                { major: "印刷包装与数字媒体学院", name: 404, address: 32, number: 12 },
                { major: "自动化与信息工程学院", name: 1033, address: 46, number: 21 },
            ],
            scrollTimer: null,
            scrollTimeout: null,
            isPaused: false, // 控制是否暂停滚动
        };
    },
    computed: {
        loopTableData() {
            console.log('生成的循环数据:', [...this.tableData, ...this.tableData]);
            return [...this.tableData, ...this.tableData];
        },
        totalGraduates() {
            return this.tableData.reduce((sum, item) => sum + item.name, 0);
        },
        totalDifficultStudents() {
            return this.tableData.reduce((sum, item) => sum + item.address, 0);
        },
        totalDifficultStudentsSettled() {
            return this.tableData.reduce((sum, item) => sum + item.number, 0);
        }
    },
    props: {
        maxHeight: {
            type: Number,
        },
    },
    mounted() {
        console.log('组件挂载时的 tableData:', this.tableData);
        this.$nextTick(() => {
            const tableWrapper = this.$refs.tableWrapper;
            if (tableWrapper) {
                let scrollTop = 0;
                this.scrollTimer = setInterval(() => {
                    if (!this.isPaused) {
                        scrollTop++;
                        tableWrapper.scrollTop = scrollTop;

                        // 滚动到复制数据的开头时重置
                        if (scrollTop >= tableWrapper.scrollHeight / 2) {
                            scrollTop = 0;
                            tableWrapper.scrollTop = scrollTop;
                        }
                    }
                }, 100); // 控制滚动速度
            }
        });
    },
    beforeDestroy() {
        clearInterval(this.scrollTimer);
        clearTimeout(this.scrollTimeout);
    },
    methods: {
        // 停止自动滚动
        stopAutoScroll() {
            this.isPaused = true;
            clearTimeout(this.scrollTimeout); // 清除已设定的恢复滚动定时器
        },
        // 恢复自动滚动，延迟1秒后启动
        resumeAutoScroll() {
            this.scrollTimeout = setTimeout(() => {
                this.isPaused = false;
            }, 1000); // 延迟1秒恢复滚动
        },
    },
};
</script>

<style scoped>
.container {
    width: 32vw;
    height: 28vh;
    background-color: rgb(11, 31, 66);
    overflow: hidden;
}

.header {
    width: 100%;
    height: 4vh;
    display: flex;
    justify-content: space-around;
    color: #f0f9eb;
}

.table-wrapper {
    height: 22vh;
    overflow-y: auto;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.table-wrapper::-webkit-scrollbar {
    display: none;
}

.table {
    display: flex;
    justify-content: space-around;
    color: rgb(255, 255, 255);
    font-size: 1.5vh;
}

.total-table {
    font-weight: bold;
}
</style>